﻿<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<!-- 引入 ECharts 文件 -->
		<script src="js/echarts.js"></script>

	</head>

	<body>
		<!---为ECharts准备一个具备大小（宽高）的DOM--->
		<div id="main" style="width: 800px; height: 600px"></div>
		<script type="text/javascript">
			//基于准备好的DOM，初始化ECharts图表
			var myChart = echarts.init(document.getElementById("main"));
			//指定图表的配置项和数据
			var option = { //指定图表的配置项和数据
				//使用预定义的颜色
				color: ["red", 'green', 'blue', '#8CC7B5', '#32CD32', '#7CFC00', '#19CAAD', 'grey'],
				title: {
					text: '多漏斗图和多金字塔',
					left: 280,
					top: 'top'
				},
				tooltip: {
					trigger: 'item',
					formatter: "{a} <br/>{b}:{c}%"
				},
				toolbox: {
					left: 750,
					top: 12,
					orient: 'vertical',
					top: 'center',
					feature: {
						dataView: {
							readOnly: false
						},
						restore: {},
						saveAsImage: {}
					}
				},
				legend: {
					orient: 'vertical',
					left: 'left',
					left: 22,
					top: 12,
					data: ['展现', '点击', '访问', '咨询', '订单']
				},
				calculable: true,

				series: [

					{
						name: '漏斗图',
						type: 'funnel',
						width: '40%',
						height: '45%',
						left: '5%',
						top: '50%',
						data: [{
								value: 60,
								name: '访问'
							}, {
								value: 30,
								name: '咨询'
							}, {
								value: 10,
								name: '订单'
							},
							{
								value: 80,
								name: '点击'
							}, {
								value: 100,
								name: '展现'
							}
						]
					},
					{
						name: '金字塔',
						type: 'funnel',
						width: '40%',
						height: '45%',
						left: '5%',
						top: '5%',
						sort: 'ascending',
						data: [{
								value: 45,
								name: '访问'
							}, {
								value: 15,
								name: '咨询'
							}, {
								value: 5,
								name: '订单'
							},
							{
								value: 65,
								name: '点击'
							}, {
								value: 100,
								name: '展现'
							}
						]
					},
					{
						name: '漏斗图',
						type: 'funnel',
						width: '40%',
						height: '45%',
						left: '55%',
						top: '5%',
						label: {
							normal: {
								position: 'left'
							}
						},
						data: [{
								value: 60,
								name: '访问'
							}, {
								value: 30,
								name: '咨询'
							},
							{
								value: 10,
								name: '订单'
							}, {
								value: 80,
								name: '点击'
							},
							{
								value: 100,
								name: '展现'
							}
						]
					},
					{
						name: '金字塔',
						type: 'funnel',
						width: '40%',
						height: '45%',
						left: '55%',
						top: '50%',
						sort: 'ascending',
						label: {
							normal: {
								position: 'left'
							}
						},
						data: [{
								value: 45,
								name: '访问'
							}, {
								value: 15,
								name: '咨询'
							},
							{
								value: 5,
								name: '订单'
							}, {
								value: 65,
								name: '点击'
							},
							{
								value: 100,
								name: '展现'
							}
						]
					}
					
				]

			};
			myChart.on('click',function(params) {
				console.log(params.data);  //   点击log输出事件
			});
			//使用刚指定的配置项和数据显示图表
			myChart.setOption(option);
		</script>
	</body>

</html>